﻿
@{
    ViewData["Title"] = "AdvanceModal";
}



<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Modal</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Advance Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Modal</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Advance Components in your page - <a href="/ElementAdvance/@Pages.AdvancePackage.Value" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [ modal ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Animeted Model</h5>
                                    </div>
                                    <div class="card-block">
                                        <p>use button with class<code> md-effect-1 to 18</code> to use effect.</p>
                                        <div class="main clearfix">
                                            <div class="column">
                                                <button class="btn btn-primary md-trigger" data-modal="modal-1">Fade in &amp; Scale</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-2">Slide in (right)</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-3">Slide in (bottom)</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-4">Newspaper</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-5">Fall</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-6">Side Fall</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-7">Sticky Up</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-8">3D Flip (horizontal)</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-9">3D Flip (vertical)</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-10">3D Sign</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-11">Super Scaled</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-12">Just Me</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-13">3D Slit</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-14">3D Rotate Bottom</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-15">3D Rotate In Left</button>
                                                <button class="btn btn-primary md-trigger" data-modal="modal-16">Blur</button>
                                                <button class="btn btn-primary md-trigger md-setperspective" data-modal="modal-17">Let me in</button>
                                                <button class="btn btn-primary md-trigger md-setperspective" data-modal="modal-18">Make way!</button>
                                                <button class="btn btn-primary md-trigger md-setperspective" data-modal="modal-19">Slip from top</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ modal ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
<!-- [ animated model content ] start -->
<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-2" id="modal-2">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-3" id="modal-3">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-4" id="modal-4">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-5" id="modal-5">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-6" id="modal-6">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-7" id="modal-7">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-8" id="modal-8">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-9" id="modal-9">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-10" id="modal-10">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-11" id="modal-11">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-12" id="modal-12">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-13" id="modal-13">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-14" id="modal-14">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-15" id="modal-15">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-16" id="modal-16">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-17" id="modal-17">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-18" id="modal-18">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-19" id="modal-19">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-modal md-effect-20" id="modal-20">
    <div class="md-content">
        <h3 class="theme-bg2">Modal Dialog</h3>
        <div>
            <p>This is a modal window. You can do the following things with it:</p>
            <ul>
                <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
                <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
                <li><strong>Close:</strong> click on the button below to close the modal.</li>
            </ul>
            <button class="btn btn-primary md-close">Close me!</button>
        </div>
    </div>
</div>
<div class="md-overlay"></div>
<!-- [ animated model content ] end -->


@section Styles{
    <!-- modal-window-effects css -->
    <link rel="stylesheet" href="~/assets/plugins/modal-window-effects/css/md-modal.css">
}

@section Scripts{
    <!-- modal-window-effects Js -->
    <script src="~/assets/plugins/modal-window-effects/js/classie.js"></script>
    <script src="~/assets/plugins/modal-window-effects/js/modalEffects.js"></script>
}

